<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
    <van-swipe-item>
      <van-grid square :column-num="5">
        <van-grid-item
          v-for="item in navList.slice(0, 5)"
          :key="item.navid"
          :icon="item.imgurl"
          :text="item.title"
        />
      </van-grid>
    </van-swipe-item>
    <van-swipe-item>
      <van-grid square :column-num="5">
        <van-grid-item
          v-for="item in navList.slice(5, 10)"
          :key="item.navid"
          :icon="item.imgurl"
          :text="item.title"
        />
      </van-grid>
    </van-swipe-item>
    <template #indicator="{ active, total }">
      <ul class="custom-indicator">
        <li v-for="(item,index) in total" :class="active==index?'current':''"></li>
      </ul>
    </template>
  </van-swipe>
</template>

<script setup>
let { navList } = defineProps(["navList"]);
</script>

<style scoped lang='less'>
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: flex;
  border-radius: 2px;
  overflow:hidden ;
  li {
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    &.current {
      background: red;
    }
  }
}
</style>